﻿<%request.setAttribute("path", request.getContextPath());%>
<%@ page import="hp.com.entity.Users" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>${requestScope.product.pname}-青鸟优选</title>
        <link rel="icon" href="${path}/jbs/images/ico.ico" type="image/x-icon">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="${path}/assets/font/simple-line-icons/css/simple-line-icons.css">
        <link rel="stylesheet" href="${path}/assets/font/iconsmind-s/css/iconsminds.css">
		<link rel="shortcut icon" type="image/x-icon" href="${path}/assets/img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

		<!-- CSS here -->
        <link rel="stylesheet" href="${path}/assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="${path}/assets/css/animate.min.css">
        <link rel="stylesheet" href="${path}/assets/css/magnific-popup.css">
        <link rel="stylesheet" href="${path}/assets/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="${path}/assets/css/jquery-ui.css">
        <link rel="stylesheet" href="${path}/assets/css/flaticon.css">
        <link rel="stylesheet" href="${path}/assets/css/aos.css">
        <link rel="stylesheet" href="${path}/assets/css/slick.css">
        <link rel="stylesheet" href="${path}/assets/css/default.css">
        <link rel="stylesheet" href="${path}/assets/css/style.css">
        <link rel="stylesheet" href="${path}/assets/css/responsive.css">
    </head>
    <body>

        <!-- preloader -->
        <div id="preloader">
            <div id="loading-center">
                <div class="loader">
                    <img src="${path}/assets/img/logo/ico.png" alt="">
                </div>
            </div>
        </div>
        <!-- preloader-end -->

        <!-- header-area -->
        <header class="header-style-two">
            <!-- header-search-area -->
            <div class="header-search-area">
                <div class="container custom-container">
                    <div class="row align-items-center">
                        <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                            <div class="logo">
                                <a href="${path}/Index"><img src="${path}/assets/img/logo/logo.png" alt="Logo"></a>
                            </div>
                        </div>
                        <div class="col-xl-10 col-lg-9">
                            <div class="d-block d-sm-flex align-items-center justify-content-end">
                                <div class="header-search-wrap">
                                    <form action="#">
                                        <input type="text" placeholder="搜索商品">
                                        <button><i class="flaticon-loupe-1"></i></button>
                                    </form>
                                </div>
                                <div class="header-action">
                                    <ul>
                                        <c:choose>
                                            <c:when test="${requestScope.userSession==null}">
                                                <li class="header-user" ><a href="${path}/Login" style="color: var(--color-primary);width: 60px;border-radius: 20px">
                                                    登录</a></li>
                                                <%--                                        <li class="header-wishlist">--%>
                                                <%--                                            <a href="#"><i class="flaticon-heart-shape-outline"></i></a>--%>
                                                <%--                                            <span class="item-count">0</span>--%>
                                                <%--                                        </li>--%>
                                                <li class="header-user"><a href="#" style="color: var(--color-primary);width: 60px;border-radius: 20px">
                                                    注册</a></li>
                                            </c:when>
                                            <c:otherwise>
                                                <li class="header-user">
                                                    <div class="header-cart-wrap">
                                                        <a href="${path}/User"><img src="${requestScope.userSession.pic_link}" alt="" style="width:44px;border-radius: 50px;height: 44px;object-fit: cover"></a>
                                                        <ul class="minicart" style="padding-right: 10px">
                                                            <li class="d-flex align-items-start">
                                                                <div class="cart-img">
                                                                    <img src="${requestScope.userSession.pic_link}" alt="" style="width: 90px;height: 90px;border-radius: 90px">
                                                                </div>
                                                                <div class="cart-content" style="margin-top: 15px;padding-right: 15px">
                                                                    <h4>${requestScope.userSession.loginname}</h4>
                                                                    <div class="cart-price">
                                                                        <span class="new">${requestScope.userSession.userTypeText}</span>
                                                                        <span style="margin: 0">${requestScope.userSession.phone}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="del-icon">
                                                                    <a onclick="logout()" style="cursor: pointer"><i class="far fa-sign-out-alt"></i></a>
                                                                </div>
                                                            </li>
                                                            <li class="d-flex align-items-start">
                                                                <div class="index-proPicBtns">
                                                                    <a href="${path}/User"><button>个人中心</button></a>
                                                                    <button>已买到的宝贝</button>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li class="header-cart-action">
                                                    <div class="header-cart-wrap">
                                                        <a href="${path}/Cart"><i class="flaticon-shopping-basket"></i></a>
                                                        <span class="item-count">2</span>
                                                        <ul class="minicart">
                                                            <li class="d-flex align-items-start">
                                                                <div class="cart-img">
                                                                    <a href="${path}/Cart"><img src="${path}/assets/img/product/cart_p01.jpg" alt=""></a>
                                                                </div>
                                                                <div class="cart-content">
                                                                    <h4><a href="Product.jsp">Organic Farm Fresh Nuts</a></h4>
                                                                    <div class="cart-price">
                                                                        <span class="new">$229.9</span>
                                                                        <span><del>$229.9</del></span>
                                                                    </div>
                                                                </div>
                                                                <div class="del-icon">
                                                                    <a href="#"><i class="far fa-trash-alt"></i></a>
                                                                </div>
                                                            </li>
                                                            <li class="d-flex align-items-start">
                                                                <div class="cart-img">
                                                                    <a href="Product.jsp"><img src="${path}/assets/img/product/cart_p02.jpg" alt=""></a>
                                                                </div>
                                                                <div class="cart-content">
                                                                    <h4><a href="Product.jsp">Organic Fresh Nuts Vanla Butter</a></h4>
                                                                    <div class="cart-price">
                                                                        <span class="new">$229.9</span>
                                                                        <span><del>$229.9</del></span>
                                                                    </div>
                                                                </div>
                                                                <div class="del-icon">
                                                                    <a href="#"><i class="far fa-trash-alt"></i></a>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="total-price">
                                                                    <span class="f-left">Total:</span>
                                                                    <span class="f-right">$239.9</span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkout-link">
                                                                    <a href="Cart.jsp">Shopping Cart</a>
                                                                    <a class="black-color" href="checkout.jsp">Checkout</a>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- header-search-area-end -->
        </header>

        <!-- header-area-end -->
        <!-- main-area -->
        <main >
            <!-- shop-details-area -->

            <section class="shop-details-area pt-70 pb-90">
                <a ></a>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="shop-details-flex-wrap">
                                <div class="shop-details-nav-wrap">
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" id="item-one-tab" data-toggle="tab" href="#item-one" role="tab" aria-controls="item-one" aria-selected="true"><img src="${requestScope.mainPics[0]}" alt=""></a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="item-two-tab" data-toggle="tab" href="#item-two" role="tab" aria-controls="item-two" aria-selected="false"><img src="${requestScope.mainPics[1]}" alt=""></a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="item-three-tab" data-toggle="tab" href="#item-three" role="tab" aria-controls="item-three" aria-selected="false"><img src="${requestScope.mainPics[2]}" alt=""></a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="item-four-tab" data-toggle="tab" href="#item-four" role="tab" aria-controls="item-four" aria-selected="false"><img src="${requestScope.mainPics[3]}" alt=""></a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="shop-details-img-wrap">
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="item-one" role="tabpanel" aria-labelledby="item-one-tab">
                                            <div class="shop-details-img">
                                                <img src="${requestScope.mainPics[0]}" style="object-fit: cover">
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="item-two" role="tabpanel" aria-labelledby="item-two-tab">
                                            <div class="shop-details-img">
                                                <img src="${requestScope.mainPics[1]}" alt="">
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="item-three" role="tabpanel" aria-labelledby="item-three-tab">
                                            <div class="shop-details-img">
                                                <img src="${requestScope.mainPics[2]}" alt="">
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="item-four" role="tabpanel" aria-labelledby="item-four-tab">
                                        <div class="shop-details-img">
                                            <img src="${requestScope.mainPics[3]}" alt="">
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="shop-details-content">
                                <h4 class="title">${requestScope.product.pname}</h4>
                                <div class="shop-details-meta">
                                    <ul>
                                        <li>${requestScope.product.description}</li>
                                    </ul>
                                </div>
                                <div class="shop-details-price">
                                    <h2 class="price" id="price">${requestScope.defaultPrice}</h2>
                                </div>
                                <ul>
                                <c:forEach items="${requestScope.optionList}" begin="0" end="${fn:length(requestScope.optionList)}" varStatus="s" var="suk" >
                                    <li class="des_choice">
                                        <span class="fl" style="margin-left: 15px">${suk.attr}</span>
                                        <ul>
                                            <c:forEach items="${suk.prop}" var="map"  varStatus="i" begin="0" end="${fn:length(suk.prop)}">
                                                <li>
                                                    <label class="labl" style="margin-bottom: 0">
                                                        <input type="radio" onclick="checkSuk()" style="display: flex" hidden name="aName_${suk.attr}"id="aId_${s.index}_${i.index}" value="${map.key}"<c:if test="${i.index==0}">checked="checked"</c:if> />
                                                        <div style="padding: 8px 10px;border-radius: 40px;min-width: 70px">${map.value}</div>
                                                    </label>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                    </li>
                                </c:forEach>
                                </ul>
                                <div class="shop-perched-info" style="margin-left: 8px;margin-top: 30px">
                                    <div class="sd-cart-wrap">
                                            <div class="cart-plus-minus">
                                                <input type="text" value="1" id="itemAmount">
                                            </div>
                                    </div>
                                    <a class="btn" onclick="doAddCart()">加入购物车</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="product-desc-wrap">
                                <div class="tab-content" id="myTabContentTwo">
                                    <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                                        <div class="product-desc-content">
                                            <h4 class="title">商品详情</h4>
                                            <hr>
                                            <div class="row" style="display: block">
                                                <div class="col-xl-3 col-md-5" style="padding: 0;margin:auto">
                                                    <div class="product-desc-img">
                                                        <img src="${path}/assets/img/logo/logoShop.png" alt="">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="des_con" id="p_attribute">
                                                    <table border="0" align="center" style="width:100%; font-family:'宋体';" cellspacing="0" cellpadding="0" id="detailsTable">
                                                        <c:forEach items="${requestScope.goodDetail}" var="d" varStatus="a" step="3" begin="0" end="${fn:length(requestScope.goodDetail)}">
                                                                    <tr>
                                                                        <td>${requestScope.goodDetail[a.index]}</td>
                                                                        <td>${requestScope.goodDetail[a.index+1]}</td>
                                                                        <td style="border: none">${requestScope.goodDetail[a.index+2]}</td>
                                                                    </tr>
                                                        </c:forEach>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="des_con">
                                                <p align="center">
                                                    <c:forEach items="${requestScope.picDetail}" var="v">
                                                        <img src="${v}" style="width: 100%;" />
                                                    </c:forEach>
                                                </p>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- shop-details-area-end -->
            <!-- best-sellers-area -->
            <section class="best-sellers-area pt-85 pb-70">
                <div class="container">
                    <div class="row align-items-end mb-40">
                        <div class="col-md-8 col-sm-9">
                            <div class="section-title">
                                <span class="sub-title" style="font-family: '微软雅黑'">猜你喜欢</span>
                                <h2 class="title">${requestScope.product.cateText}分类精品推荐</h2>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-3">
                            <div class="section-btn text-left text-md-right">
                                <a href="${path}/Types?category=${requestScope.product.category}" class="btn">查看所有${requestScope.product.cateText}商品</a>
                            </div>
                        </div>
                    </div>
                    <div class="best-sellers-products">
                        <div class="row justify-content-center">
                            <c:forEach items="${requestScope.recommendation}" begin="0" end="5" var="i" >
                                <div class="col-3">
                                    <div class="sp-product-item mb-20">
                                        <div class="sp-product-thumb">
                                            <span class="batch">${i.cateLvl2Text}</span>
                                            <a href="${path}/details?id=${i.id}"><img src="${i.picName}" alt=""></a>
                                        </div>
                                        <div class="sp-product-content">
<%--                                            <div class="rating">--%>
<%--                                                <i class="fas fa-star"></i>--%>
<%--                                                <i class="fas fa-star"></i>--%>
<%--                                                <i class="fas fa-star"></i>--%>
<%--                                                <i class="fas fa-star"></i>--%>
<%--                                                <i class="fas fa-star"></i>--%>
<%--                                            </div>--%>
                                            <h6 class="title"><a href="Product.jsp">${i.easyName}</a></h6>
                                            <span class="product-status">${i.description}</span>
                                            <p>¥${i.sukPrice} <span style="font-size: 8px">起</span></p>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </section>
            <!-- best-sellers-area-end -->
        </main>
        <!-- main-area-end -->
        <!--Begin 弹出层-加入购物车 Begin-->
        <div id="fadeBlack" class="black_overlay">
        </div>
        <div id="addCartMessage" class="white_content">
            <a onclick="CloseDiv('addCartMessage','fadeBlack')"><i class="simple-icon-close" style="font-size: 20px;font-weight: bolder;position: absolute;top:20px;left: 40px"></i></a>
            <div class="white_d">
                <div class="notice_c">
                    <table border="0" align="center" style="width: 40%" cellspacing="0" cellpadding="0">
                        <tr valign="top" style="text-align: center;height: 60px">
                            <td>
                                <i class="fa fa-check-circle" style="color: var(--color-primary);font-size: 30px;vertical-align: center"></i>
                            </td>
                            <td>
                                <span style="color:#3e3e3e; font-size:18px; font-weight:bold;vertical-align: center">商品已成功添加到购物车</span><br />
                            </td>
                        </tr>
                        <tr height="50" valign="bottom" class="btnHoverText">
                            <td colspan="2"><a href="${path}/Cart#showCart" class="button_rc float-left">去购物车结算</a><a href="#" class="button_r float-right" onclick="CloseDiv('addCartMessage','fadeBlack')">继续购物</a></td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <!--End 弹出层-加入购物车 End-->
        <!-- footer-area -->
        <footer>
            <div class="copyright-wrap">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="copyright-text">
                                <p>Copyright &copy 2006-2020 武汉北启至优文化科技有限公司 版权所有 All Rights Reserved.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="payment-accepted text-center text-md-right">
                                <img src="${path}/assets/img/images/payment_card.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-area-end -->
		<!-- JS here -->
        <script src="${path}/assets/js/vendor/jquery-3.6.0.min.js"></script>
        <script src="${path}/assets/js/bootstrap.min.js"></script>
        <script src="${path}/assets/js/isotope.pkgd.min.js"></script>
        <script src="${path}/assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="${path}/assets/js/jquery.magnific-popup.min.js"></script>
        <script src="${path}/assets/js/jquery.countdown.min.js"></script>
        <script src="${path}/assets/js/jquery-ui.min.js"></script>
        <script src="${path}/assets/js/slick.min.js"></script>
        <script src="${path}/assets/js/ajax-form.js"></script>
        <script src="${path}/assets/js/wow.min.js"></script>
        <script src="${path}/assets/js/aos.js"></script>
        <script src="${path}/assets/js/plugins.js"></script>
        <script src="${path}/assets/js/main.js"></script>
        <script src="${path}/assets/js/shade.js"></script>
        <script>
            function sleep (time) {
                return new Promise((resolve) => setTimeout(resolve, time));
            }
            function checkSuk() {checkSuk
                console.log("triggered");
                let spanNode = document.getElementById("price");
                let suk = new Array();
                jQuery('input[name^="aName"]').each(function(index,item){
                    if(item.checked){
                        suk.push(item.value);
                    }
                });
                jQuery.ajax({
                    url:"${path}/CheckSukPrice?",
                    type:"post",
                    data:"suk="+suk,//请求的数据格式
                    dataType:"text",//返回的数据格式
                    //请求前调用的函数
                    beforeSend:function(){
                    },
                    //请求成功调用的函数
                    success:function(result){
                        spanNode.innerHTML="¥"+result;
                    },
                    //请求错误调用的函数
                    error:function(){
                    },
                    complete:function (){
                    }
                });
                ;        }
            function logout(){
                $.ajax({
                        url:"${path}/logoutServlet",
                        data:{},
                        type:"POST",
                        dataType:"json",
                        complete:function (data){
                            location.reload();
                        },
                    }
                )
            }
            //添加到购物车方法
            function doAddCart(){
                let suk = new Array();
                jQuery('input[name^="aName"]').each(function(index,item){
                    if(item.checked){
                        suk.push(item.value);
                    }
                });
                let itemId = getQueryVariable("id");
                let amount = document.getElementById("itemAmount").value;
                jQuery.ajax({
                    url:"${path}/AddToCart?id="+itemId+"&&suk="+suk+"&&amount="+amount,
                    type:"post",
                    data: {"id":itemId,"suk":suk,"amount":amount},
                    dataType: "text",
                    beforeStart(){},
                    success(result){
                        if(result=="success"){
                            OpenDivAddCart('addCartMessage','fadeBlack')}else{
                            window.location.href="/Login";
                        }
                    }, complete(){},
                })
                //window.location.href="/AddToCart?id="+itemId+"&&suk="+suk+"&&amount="+amount;
            }
            //获取网页参数方法
            function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
        </script>
    </body>
</html>
